<template>
  <div class="home">
    <div class="flex-header">
      <my-header title="主页" isGoBack="false" :warehouse="warehouse"/>
    </div>
    <div class="content-box">
      <div class="meun">
        <div class="nav" v-for="(item, index) in menu" @click="goPath(item.link)">
          <div class="nav-box">
            <mu-ripple :color="color" :opacity="0.25">
              <i :class="item.iconClass"></i>{{item.name}}
            </mu-ripple>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/header"
import api from "@/common/api"
export default {
  name: 'home',
  components: {
    myHeader
  },
  data () {
    return {
      color: "#00e676",
      menu:[{
          iconClass: 'iconfont icon-ticheyanche brown',
          name: '提车验证',
          link: '/liftcarver'
          },{
          iconClass: 'iconfont icon-yanzheng brown',
          name: '唛头验证',
          link: '/markver'
        }],
      warehouse: "",
      intervalTask: null,
      isAction: true
    }
  },
  methods: {
    SetColor (c, f) {
    },
    goPath (path) {
      this.$router.push({ path: path });
    },
    addMeun () {
      if(this.$store.state.meun.length == 0){
        /* 发送post请求 */
        this.common.reqData(api.app('homeMeun'), this.$store.state.user, res=>{
          console.log("菜单获取", res)
          if(res.data.content.modules == 0){
            // 提示
            this.Toast({
                duration: 0,
                mask: true,
                message: '当前用户无权限菜单'
            });
            return false;
          }else{
            this.$store.commit('getMeun', res.data.content.modules);
            this.menu = this.$store.state.meun;
            this.addMeun();
          }
        }, err =>{
          console.log(err)
        });
      }else{
        this.menu = this.$store.state.meun;
      }
      // meun添加多余的
      let mlen = 3 - this.menu.length % 3;
      if(mlen < 3){
        for(let i = 0; i < mlen; i++){
          this.menu.push({});
        }
      }
    },
    GetTaskFetch () {
      if(this.isAction){
        this.isAction = false;
        this.common.reqData(api.app('onroadJumppage'), this.$store.state.user, res=>{
          console.log(res.data);
          if(res.data.status == 100){
            if(res.data.content.page == 1){
              this.$router.push({ path: 'roadfetch' });
            }else if(res.data.content.page == 2){
              this.$router.push({ path: 'transitfetch' });
            }
          }
          this.isAction = true;
        },err =>{
          this.isAction = true;
          console.log(err)
        });
      }
    }
  },
  mounted () {
    this.color = "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
    this.addMeun();

    this.intervalTask = setInterval(() => {
      this.GetTaskFetch();
    }, 5 * 1000);
    
    this.warehouse = this.$store.state.warehouse;
  },
  beforeDestroy () {
    clearInterval(this.intervalTask);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header-box img{
  width: 100%;
  height: auto;
  display: block;
}
.home, .meun{
  background-color: #fafafa;
}
.meun{
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items:center;
}
.nav{
  width: 30%;
  margin: 10px 1.66%;
  height: 9em;
  text-align: center;
  display: table;
  /* border-top: 1px solid #5F74A0; */
  position: relative;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 5px 10px rgba(0, 68, 102, 0.25);
}
/* .nav.nav-h{
  width: 100%;
} */
.nav-box{
  display: table-cell;
  vertical-align: middle;
}
.iconfont{
  display: block;
  font-size: 3em;
  color: #5F74A0;
  margin: 0 auto 5px;
  text-align: center;
}
.red1{
	--red: #e54d42;
	/* 浅色 */
	--redLight: #fadbd9;
	--orangeLight: #fde6d2;
	--yellowLight: #fef2ce;
	--oliveLight: #e8f4d9;
	--greenLight: #d7f0db;
	--cyanLight: #d2f1f0;
	--blueLight: #cce6ff;
	--purpleLight: #e1d7f0;
	--mauveLight: #ebd4ef;
	--pinkLight: #f9d7ea;
	--brownLight: #ede1d9;
	--greyLight: #e7ebed;
	/* 渐变色 */
	--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
	--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
	--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
	--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
	--gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
	--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
	/* 阴影透明色 */
	--redShadow: rgba(204, 69, 59, 0.2);
	--orangeShadow: rgba(217, 109, 26, 0.2);
	--yellowShadow: rgba(224, 170, 7, 0.2);
	--oliveShadow: rgba(124, 173, 55, 0.2);
	--greenShadow: rgba(48, 156, 63, 0.2);
	--cyanShadow: rgba(28, 187, 180, 0.2);
	--blueShadow: rgba(0, 102, 204, 0.2);
	--purpleShadow: rgba(88, 48, 156, 0.2);
	--mauveShadow: rgba(133, 33, 150, 0.2);
	--pinkShadow: rgba(199, 50, 134, 0.2);
	--brownShadow: rgba(140, 88, 53, 0.2);
	--greyShadow: rgba(114, 130, 138, 0.2);
	--grayShadow: rgba(114, 130, 138, 0.2);
	--blackShadow: rgba(26, 26, 26, 0.2);
}
.red { color: #e54d42;}
.orange{ color: #f37b1d;}
.yellow{ color: #fbbd08;}
.olive{ color: #8dc63f;}
.green{ color: #39b54a;}
.cyan{ color: #1cbbb4;}
.blue{ color: #0081ff;}
.purple{ color: #6739b6;}
.mauve{ color: #9c26b0;}
.pink{ color: #e03997;}
.brown{ color: #a5673f;}
.grey{ color: #8799a3;}
.black{ color: #ec008c;}
.darkGray{ color: #f43f3b;}
.gray{ color: #69f33f;}
.ghostWhite{ color: #ac6f2a;}
.white{ color: #0ff1df;}
</style>
